<template>
  <div class="box1">
    <div class="zbc" v-if="zbc">
      <div class="con" v-if="con">
        <div class="el-icon-close" @click="guanbi"></div>
        <div class="d1">手机号码注册</div>
        <div class="d2">
          已有账号？
          <span style="cursor: pointer" @click="denglu">去登录</span>
        </div>
        <div>
          <input
            class="input1"
            type="text"
            v-model="phone"
            placeholder="请输入手机号"
          />
        </div>
        <div style="position: relative">
          <input type="text" v-model="phoneCode" placeholder="请输入验证码" />
          <p class="input_p" @click="phoneCodeClick">
            {{ yzm }}
          </p>
        </div>
        <div>
          <input
            type="password"
            v-model="password"
            placeholder="请输入密码（最少6位）"
          />
        </div>
        <div class="xieyi">
          <el-checkbox v-model="zhuce_xy"></el-checkbox>
          <p class="p">
            注册即默认同意
            <span style="cursor: pointer" @click="toXieyi(3)"
              >《帮帮同城用户协议》</span
            >
            <span style="cursor: pointer" @click="toXieyi(2)"
              >《帮帮同城隐私政策》</span
            >
          </p>
        </div>
        <div
          class="queding"
          @click="zhuceClick"
          :class="zhuce_xy ? '' : ' xuan'"
        >
          注册
        </div>
      </div>
      <div class="con1" v-if="con1 || con3">
        <div class="el-icon-close" @click="guanbi"></div>
        <div class="d1">
          <div
            class="d1d1"
            :class="con1 ? 'active' : ''"
            @click="(con3 = false), (con1 = true)"
          >
            手机号登录
          </div>
          <div
            class="d1d1"
            :class="con3 ? 'active' : ''"
            @click="(con3 = true), (con1 = false), scanLogin()"
          >
            扫码登录
          </div>
        </div>
        <template v-if="con1">
          <div>
            <input
              class="input1"
              v-model="phone"
              type="text"
              placeholder="请输入手机号"
            />
          </div>
          <div style="position: relative" v-if="!zhanghao">
            <input type="text" v-model="phoneCode" placeholder="请输入验证码" />
            <p class="input_p" @click="phoneCodeClick">
              {{ yzm }}
            </p>
          </div>
          <div v-if="zhanghao">
            <input
              type="password"
              v-model="password"
              placeholder="请输入密码"
            />
          </div>
          <div class="xieyi">
            <el-checkbox v-model="denglu_xy"></el-checkbox>
            <p class="p">
              登录即默认同意
              <span style="cursor: pointer" @click="toXieyi(3)"
                >《帮帮同城用户协议》</span
              >
              <span style="cursor: pointer" @click="toXieyi(2)"
                >《帮帮同城隐私政策》</span
              >
            </p>
          </div>
          <div
            :class="denglu_xy ? 'queding' : 'queding xuan'"
            @click="dengluClick"
          >
            登录
          </div>
          <div class="d d2" @click="zhanghao = !zhanghao">
            {{ zhanghao ? "验证码登录" : "账号密码登录" }}
          </div>
          <div class="d" @click="zhuce">注册账号</div>
        </template>
        <template v-if="con3">
          <div class="scan-code">
            <!-- <div class="scan-code-title">微信扫一扫登录</div> -->
            <div
              class="scan-code-img"
              style="margin: 0 auto; margin-top: 104px"
              id="wechat-login"
            ></div>
          </div>
        </template>
        <!-- <p class="qita">
					<span class="s1"></span>
					<span>其他方式登录</span>
					<span class="s1"></span>
				</p> -->
        <!-- <div class="wx">
					<img src="../assets/weixin.png" />
					<p>微信</p>
				</div> -->
      </div>
      <div class="con2" v-if="con2">
        <slide-verify
          class="verify"
          ref="slideblock"
          @again="onAgain"
          @fulfilled="onFulfilled"
          @success="onSuccess"
          @fail="onFail"
          @refresh="onRefresh"
          :imgs="picArray"
          :slider-text="text"
        >
          <!-- :accuracy="accuracy" -->
        </slide-verify>
        <i
          class="el-icon-circle-close"
          style="
            position: absolute;
            right: 39.5%;
            font-size: 40px;
            cursor: pointer;
            top: 39.4%;
          "
          @click="ycCon()"
        ></i>
      </div>
    </div>
    <complaint ref="complaint" v-if="showComplaint"></complaint>
  </div>
</template>

<script>
import complaint from "@/components/complaint.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "login",
  components: {
    complaint,
  },
  computed: {
    ...mapState({
      showComplaint: (state) => state.showComplaint,
    }),
  },
  watch: {
    $route: {
      handler(newV, oldV) {
        // alert("你好啊")
        if (
          newV.query.code &&
          newV.query.redirect_uri &&
          JSON.parse(localStorage.getItem("userInfo"))
        ) {
          this.$getHttp("/pc/login/sweepLoginCode.do", {
            code: newV.query.code,
          }).then((res) => {
            this.userOpenid = res.openId.unionid;
            this.$postHttp("/api/mobile/public/bindingOrUnbindWeChat", {
              userId: JSON.parse(localStorage.getItem("userInfo")).id,
              bindingState: 1,
              openId: this.userOpenid || "",
            }).then((res) => {
              this.mySuccessMessage(res.msg);
              this.openUrls(newV.query.redirect_uri);
            });
          });

          return false;
        }
        if (newV.query.code && !JSON.parse(localStorage.getItem("userInfo"))) {
          let code = newV.query.code;
          this.$getHttp("/pc/login/sweepLoginCode.do", {
            code,
          }).then((res) => {
            this.userOpenid = res.openId.unionid;
            this.$getHttp("/mob/login/getUserByWXOpenId", {
              openId: this.userOpenid,
              convencid: "",
            }).then((data) => {
              if (data.code == 200) {
                if (!data.userInfo.phone) {
                  this.myErrorMessage("请绑定手机号");
                  // 切换

                  this.guanbi();
                  this.tou_zhuce();
                  return;
                }
                if (data.userInfo.isEnables == "0") {
                  than.zbc = false;
                  than.con = false;
                  than.con1 = false;
                  localStorage.setItem("tempId", data.userInfo.id);
                  this.setShowComplaint(true);

                  return;
                }
                this.$message({
                  message: "登录成功！",
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
                localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
                // 返回上一页并刷新页面
                // window.history.go(-1);
                window.location.reload();

                this.$getHttp("/mob/user/getIsReadMsg", {
                  isRead: 2,
                  examineStatus: 2,
                  userId: data.userInfo.id,
                }).then((data2) => {
                  if (data2.code == 200) {
                    // localStorage.setItem("msgCount", data2.result);
                    this.setMsgCount(data2.result);
                    this.$getHttp("/mob/login/getUserInfoByPhone", {
                      phone: data.userInfo.phone,
                    }).then((data) => {
                      if (data.code == 200) {
                        //  this.login({user_name:data.userInfo.nikeName})
                        localStorage.setItem(
                          "userInfo",
                          JSON.stringify(data.userInfo)
                        );
                      }
                    });
                    than.zbc = false;
                    than.con = false;
                    than.con1 = false;
                  }
                });
              }
            });
          });
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      userOpenid: "",
      picArray: [
        require("@/assets/verify/1.jpg"),
        require("@/assets/verify/2.jpg"),
        require("@/assets/verify/3.jpg"),
        require("@/assets/verify/4.jpg"),
        require("@/assets/verify/5.jpg"),
        require("@/assets/verify/6.jpg"),
      ],
      ce: false,
      zbc: false,
      con: false,
      con1: false,
      con2: false,
      con3: false,

      zhanghao: false,
      userInfo: "",
      // 登录，注册变量
      zhuce_xy: "",
      denglu_xy: "",
      phone: "",
      password: "",
      phoneCode: "",
      wxOpenid: "",
      image: "",
      nikeName: "",
      zfbOpenid: "",
      pdOpenid: "",
      setIntervalNum: "",
      yzm: "获取验证码",
      shijian: 60,
      show: false,
      text: "",
    };
  },
  mounted() {},
  methods: {
    ...mapMutations(["setShowComplaint", "login", "setMsgCount"]),
    scanLogin() {
      setTimeout(() => {
        // 创建微信登录的对象
        new WxLogin({
          self_redirect: false, // 是否在iframe内跳转 redirect_uri
          id: "wechat-login", // 希望二维码嵌入容器的 id
          state: +new Date(),
          appid: "wxd8e9827879a8d201",
          scope: "snsapi_login",
          response_type: "code",
          // redirect_uri: encodeURIComponent('https://ws.weisou.online/conven_web/#/'),
          redirect_uri: encodeURIComponent(
            "https://www.bangbangtongcheng.com/#/"
          ),

          // redirect_uri: encodeURIComponent('http://192.168.0.118:8080/#/'),
          // href:    'data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMjAwcHg7DQogIGhlaWdodDogMjAwcHg7DQp9DQo=',
        });
      });
    },
    ycCon() {
      this.con2 = false;
    },
    login() {
      this.zbc = true;
      this.con1 = true;
    },
    toXieyi(id) {
      window.open(
        "https://www.bangbangtongcheng.com/conven_pc/#/index/particulars?type=prot&id=" +
          id,
        "_blank"
      );
    },
    dengluClick() {
      if (!this.denglu_xy) {
        return;
      }
      if (this.phone == "") {
        this.$message({
          message: "请输入手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
      if (!reg_tel.test(this.phone)) {
        this.$message({
          message: "请输入正确手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      if (this.zhanghao) {
        var loginType = 2;
        if (this.password == "") {
          this.$message({
            message: "请输入密码！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        var than = this;
        this.$postHttp("/mob/login/phoneLogin", {
          phone: this.phone,
          loginType: loginType,
          password: this.password,
        }).then((data) => {
          if (data.code == 200) {
            if (data.userInfo.isEnables == "0") {
              than.zbc = false;
              than.con = false;
              than.con1 = false;
              localStorage.setItem("tempId", data.userInfo.id);
              this.setShowComplaint(true);

              return;
            }
            // if (!this.checkStutas(data.userInfo)) {
            //   this.$message({
            //     message: "您的账号不能使用！",
            //     type: "warning",
            //     offset: 120,
            //     duration: 2000,
            //   });
            //   return;
            // }
            this.$message({
              message: "登录成功！",
              type: "success",
              offset: 120,
              duration: 2000,
            });
            localStorage.setItem("userInfo", JSON.stringify(data.userInfo));

            this.$getHttp("/mob/user/getIsReadMsg", {
              isRead: 2,
              examineStatus: 2,
              userId: data.userInfo.id,
            }).then((data2) => {
              if (data2.code == 200) {
                // localStorage.setItem("msgCount", data2.result);
                this.setMsgCount(data2.result);
                this.$getHttp("/mob/login/getUserInfoByPhone", {
                  phone: data.userInfo.phone,
                }).then((data) => {
                  if (data.code == 200) {
                    //  this.login({user_name:data.userInfo.nikeName})
                    localStorage.setItem(
                      "userInfo",
                      JSON.stringify(data.userInfo)
                    );
                  }
                });
                than.zbc = false;
                than.con = false;
                than.con1 = false;
                this.$emit("succer", true);
              }
            });
          }
        });
      } else {
        var loginType = 1;
        if (this.phoneCode.trim().length == 0) {
          this.$message({
            message: "请输入验证码！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
          return;
        }
        var than = this;
        this.$postHttp("/mob/login/phoneLogin", {
          phone: this.phone,
          loginType: loginType,
          phoneCode: this.phoneCode,
        }).then((data) => {
          if (data.code == 200) {
            this.$message({
              message: "登录成功！",
              type: "success",
              offset: 120,
              duration: 2000,
            });
            localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
            //  this.login({user_name:data.userInfo.nikeName})

            this.$getHttp("/mob/user/getIsReadMsg", {
              isRead: 2,
              examineStatus: 2,
              userId: data.userInfo.id,
            }).then((data2) => {
              if (data2.code == 200) {
                // localStorage.setItem("msgCount", data2.result);
                this.setMsgCount(data2.result);
                this.$getHttp("/mob/login/getUserInfoByPhone", {
                  phone: data.userInfo.phone,
                }).then((data) => {
                  if (data.code == 200) {
                    //  this.login({user_name:data.userInfo.nikeName})
                    localStorage.setItem(
                      "userInfo",
                      JSON.stringify(data.userInfo)
                    );
                  }
                });
                than.zbc = false;
                than.con = false;
                than.con1 = false;
                this.$emit("succer", true);
              }
            });
          }
        });
      }
    },
    zhuceClick() {
      if (!this.zhuce_xy) {
        return;
      }
      if (this.phone == "") {
        this.$message({
          message: "请输入手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      if (this.password == "") {
        this.$message({
          message: "请输入密码！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      if (this.password == "") {
        this.$message({
          message: "请输入验证码！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      var than = this;
      this.$postHttp("/mob/login/phoneRegister", {
        phone: this.phone,
        password: this.password,
        phoneCode: this.phoneCode,
        wxOpenid: this.userOpenid || "",
      }).then((data) => {
        console.log(data);
        if (data.code == 200) {
          this.$message({
            message: "注册成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          than.zhanghao = !than.zhanghao;
          than.denglu();
        }
      });
    },
    phoneCodeClick() {
      if (this.yzm != "获取验证码") {
        return;
      }
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
      if (!reg_tel.test(this.phone)) {
        this.$message({
          message: "请输入正确手机号！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }
      this.con2 = true;
    },
    tou_zhuce() {
      this.zbc = true;
      this.con = true;
    },
    guanbi() {
      this.zbc = false;
      this.con = false;
      this.con1 = false;
      this.con3 = false;
    },
    zhuce() {
      this.phone = "";
      this.password = "";
      this.phoneCode = "";
      this.con = true;
      this.con1 = false;
    },
    denglu() {
      this.phone = "";
      this.password = "";
      this.phoneCode = "";
      this.con = false;
      this.con1 = true;
    },
    onSuccess() {
      var than = this;
      if (this.con1) {
        var type = "";
      } else {
        var type = 1;
      }
      console.log("验证通过");
      than.con2 = false;
      this.$getHttp("/mob/login/phoneVerification.do", {
        phone: this.phone,
        type: type,
      }).then((data) => {
        this.$message({
          message: "获取验证码成功",
          type: "success",
          offset: 120,
          duration: 2000,
        });
        var set = setInterval(() => {
          if (than.shijian < 1) {
            clearInterval(set);
            than.yzm = "获取验证码";
            than.shijian = 60;
            return;
          }
          than.yzm = this.shijian + "s后重新发送";
          than.shijian--;
        }, 1000);
      });
    },
    onFail() {
      console.log("验证不通过");
      this.msg = "";
    },
    onRefresh() {
      console.log("点击了刷新小图标");
      this.msg = "";
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick() {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-message--danger {
  color: red !important;

  .el-message__content {
    color: red !important;
  }
}

/deep/.el-message--danger {
  color: blue !important;
}

.el-message--danger {
  color: yellow !important;
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;

  .con {
    position: absolute;
    width: 470px;
    height: 540px;
    background-color: #fff;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .el-icon-close {
      position: absolute;
      color: #999999;
      top: 25px;
      right: 30px;
      font-size: 25px;
      cursor: pointer;
    }

    .d1 {
      position: absolute;
      top: 47px;
      left: 60px;
      font-size: 26px;

      font-weight: 600;
      color: #64b6a8;
    }

    .d2 {
      position: absolute;
      top: 58px;
      right: 60px;
      color: #999999;

      span {
        color: #64b6a8;
        border-bottom: 1px solid #64b6a8;
      }
    }

    input {
      width: 350px;
      font-size: 18px;
      line-height: 25px;
      margin-left: 60px;
      margin-bottom: 30px;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 10px;
    }

    .input1 {
      margin-top: 140px;
    }

    .input_p {
      position: absolute;
      right: 60px;
      bottom: 43px;
      color: #64b6a8;
      font-size: 18px;
      cursor: pointer;
    }

    .xieyi {
      position: relative;
      width: 348px;
      margin-left: 60px;

      .p {
        width: 348px;
        font-size: 18px;
        color: #666;
        text-indent: 36px;
        line-height: 28px;

        span {
          color: #64b6a8;
        }
      }

      .el-checkbox {
        position: absolute;
      }

      /deep/.el-checkbox__inner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 6px;
        height: 13px;
        left: 9px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }

    .queding {
      width: 350px;
      height: 48px;
      line-height: 48px;
      margin-left: 60px;
      text-align: center;
      background-color: #64b6a8;
      border-radius: 24px;
      margin-top: 30px;
      font-size: 21px;
      cursor: pointer;
    }

    .xuan {
      opacity: 0.5;
    }
  }

  .con1 {
    position: absolute;
    width: 470px;
    // height: 650px;
    padding-bottom: 32px;
    background-color: #fff;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .el-icon-close {
      position: absolute;
      color: #999999;
      top: 25px;
      right: 30px;
      font-size: 25px;
      cursor: pointer;
    }

    .d1 {
      position: absolute;
      top: 47px;
      left: 60px;
      right: 60px;
      font-size: 24px;
      font-weight: 600;
      color: #333333;
      display: flex;
      justify-content: space-around;

      .d1d1 {
        &.active {
          color: #64b6a8;
          font-size: 28px;
        }
      }
    }

    input {
      width: 350px;
      font-size: 18px;
      line-height: 25px;
      margin-left: 60px;
      margin-bottom: 30px;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 10px;
    }

    .input1 {
      margin-top: 140px;
    }

    .input_p {
      position: absolute;
      right: 60px;
      bottom: 43px;
      color: #64b6a8;
      font-size: 18px;
      cursor: pointer;
    }

    .xieyi {
      position: relative;
      width: 348px;
      margin-left: 60px;

      .p {
        width: 348px;
        font-size: 18px;
        color: #666;
        text-indent: 36px;
        line-height: 28px;

        span {
          color: #64b6a8;
        }
      }

      .el-checkbox {
        position: absolute;
      }

      /deep/.el-checkbox__inner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 6px;
        height: 13px;
        left: 9px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }

    .queding {
      width: 350px;
      height: 48px;
      line-height: 48px;
      margin-left: 60px;
      text-align: center;
      background-color: #64b6a8;
      border-radius: 24px;
      margin-top: 30px;
      font-size: 21px;
      cursor: pointer;
    }

    .xuan {
      opacity: 0.5;
    }

    .d {
      display: inline-block;
      font-size: 18px;
      color: #999999;
      margin-top: 16px;
      cursor: pointer;
    }

    .d2 {
      margin-left: 60px;
      margin-right: 165px;
    }

    .qita {
      width: 270px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 35px;

      span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 22px;
        color: #999;
      }

      span:nth-child(3n) {
        margin-right: 0;
      }

      .s1 {
        width: 58px;
        height: 1px;
        background-color: #999;
      }
    }

    .wx {
      width: 46px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 35px;
      cursor: pointer;

      img {
        width: 46px;
        height: 46px;
      }

      p {
        font-size: 16px;
        color: #666;
        text-align: center;
        margin-top: 6px;
      }
    }
  }

  .con2 {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 991;

    .verify {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      /deep/.slide-verify-slider {
        border: 0;
        margin-top: -5px;
      }
    }
  }

  .motaikuang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .verify {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

// .box {
// 	position: absolute;
// 	width: 100%;
// 	max-width: 1920px;
// 	min-width: 1200px;
// 	padding-bottom: 200px;
// }
.box1 {
  // display: none;
  //     position: fixed;
  //   width: 100%;
  //   top: 0;
  //   bottom: 0;

  //   z-index: 999999;
  position: absolute;
}

.scan-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;

  .scan-code-title {
    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;
    margin: 104px 0 24px 0;
  }

  .scan-code-img {
    // width: 266px;
    // height: 266px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    // background-color: red;
  }
}
</style>
